<div class="planning-header">
    <h2 class="planning-header-title" translate>To be planned</h2>

    <div class="tlp-dropdown backlog-add-item-button"
        ng-if="(backlog.details.accepted_types.content.length > 1 || backlog.details.accepted_types.parent_trackers.length > 0) &&
                backlog.details.user_can_move_cards"
    >
        <button type="button"
            class="tlp-button-primary tlp-button-outline tlp-button-small"
            open-tlp-dropdown
        >
            <i class="fa fa-plus tlp-button-icon"></i>
            <span translate>Add item</span>
            <i class="fa fa-caret-down tlp-button-icon-right"></i>
        </button>
        <div class="tlp-dropdown-menu" role="menu">
            <span class="tlp-dropdown-menu-title"
                  role="menuitem"
                  ng-if="backlog.details.accepted_types.parent_trackers.length > 0"
                  translate>Parents</span>
            <a href="javascript:;"
               ng-repeat="accepted_type in backlog.details.accepted_types.parent_trackers"
               ng-click="backlog.showAddBacklogItemParentModal(accepted_type)"
               class="tlp-dropdown-menu-item"
               role="menuitem"
            ><i class="tlp-dropdown-menu-item-icon fa fa-fw fa-plus"></i> <span translate>Add {{ accepted_type.label }}</span></a>

            <span class="tlp-dropdown-menu-title"
                  role="menuitem"
                  ng-if="backlog.details.accepted_types.content.length > 0"
                  translate>Backlog Item</span>
            <a href="javascript:;"
               ng-repeat="accepted_type in backlog.details.accepted_types.content"
               ng-click="backlog.showAddBacklogItemModal($event, accepted_type)"
               class="tlp-dropdown-menu-item"
               role="menuitem"
            ><i class="tlp-dropdown-menu-item-icon fa fa-fw fa-plus"></i> <span translate>Add {{ accepted_type.label }}</span></a>
        </div>
    </div>

    <button type="button"
        ng-if="backlog.soloButtonCanBeDisplayed()"
        class="tlp-button-primary tlp-button-outline tlp-button-small backlog-add-item-button"
        ng-click="backlog.showAddBacklogItemModal($event, backlog.details.accepted_types.content[0])"
    >
        <i class="fa fa-plus tlp-button-icon"></i> <span translate>Add {{ backlog.details.accepted_types.content[0].label }}</span>
    </button>

    <div class="planning-header-spacer"></div>

    <input type="search"
        ng-show="backlog.backlog_items.content.length > 0"
        class="tlp-search tlp-search-small backlog-header-search"
        placeholder="{{::'Filter...' | translate }}"
        ng-model="backlog.filter.terms"
        ng-keyup="backlog.filterBacklog()"
    >
</div>

<div class="tlp-alert-warning planning-warning" ng-if="backlog.displayUserCantPrioritize()" translate>
    You are not allowed to rank on this planning
</div>

<div infinite-scroll
    scroll-callback="backlog.displayBacklogItems()"
    scroll-threshold="100"
>
    <div class="backlog-items backlog"
        ng-class="{ 'backlog-empty': backlog.isBacklogLoadedAndEmpty() }"
        data-accept="{{ backlog.details.accepted_types.toString() }}"
        data-nodrop="{{ ! backlog.canUserMoveCards() }}"
    >
        <div ng-repeat="backlog_item in backlog.backlog_items.filtered_content"
            class="backlog-item {{ planning.current_view_class }}"
            data-accept="{{ backlog_item.accepted_types.toString() }}"
            data-type="{{ backlog_item.trackerId }}"
            collapsed="true"
            data-nodrag="{{ ! backlog.canUserMoveCards() }}"
            data-item-id="{{ backlog_item.id }}"
            backlog-item-index="$index"
            backlog-item-select="backlog_item"
            backlog-item
            ng-init="canUserMoveCards=backlog.canUserMoveCards"
        ></div>
    </div>
</div>
<div ng-if="backlog.backlog_items.loading" class="backlog-loading"></div>
<div ng-if="backlog.backlog_items.fully_loaded && backlog.backlog_items.content.length > 0"
    class="backlog-fully-loaded"
    translate
>All items have been loaded</div>
